<template>
    <div class="person">
        <h2>toRefs与toRef，将响应式对象中的属性转换成ref对象</h2>
        <p>一辆价值{{ car.price }}万的{{ car.brand }}</p>
        <button @click="changePrice">修改汽车的价格+10</button>
        <br>
        <button @click="changeBrand">修改汽车的品牌</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, toRef, toRefs } from 'vue';

let car = reactive({brand: '宝马', price: 10});
function changePrice() {
    car.price += 10;
}
function changeBrand() {
    car.brand += '~';
}

let {brand, price} = toRefs(car);
let money = toRef(car, 'price');
console.log(money.value);
</script>

<style lang="css" scoped>
</style>